{% extends 'base.html' %}

{% block extra-head %}
<link rel="stylesheet" type="text/css"  media="screen" href="{{ MEDIA_URL }}tasks/tasks.css" />
{% endblock %}

{% block title %}Transparency through volunteering{% endblock %}

{% block section %}home2{% endblock %}

{#{% block sneakytitle %}<h3>Join Democracy Club to help make this the <em>most accountable</em> general election ever!</h3>{% endblock %}#}

{% block content %}
<script type="text/javascript">
window.onload = function () { document.getElementById('id_first_name').focus(); }
</script>

<div class="span-5">
<h2>We need volunteers to help make this the <em>most accountable</em> election ever!</h2>
<p>
Best of all, anyone can help. For instance you could be <strong>finding out who your local candidates are</strong> or perhaps <strong>getting their positions on key issues</strong> and then helping us make this information public online. Interested? Great! Join Democracy Club!
</p>
</div>

<div class="span-3 last" style="float:right;">
    <div id="visualization"></div>
    <p class="small">We're trying to get volunteers in every part of the UK.  So far, we've recruited {{ volunteers }} volunteers in {{ count }} constituencies (out of a total {{ total }}). <em><a href="/statistics/">Read more about how we're doing.</a></em></p>
    <p class="quiet">Right now we're signing people up to the current constituencies; things will automatically work with new constituencies as and when they're available.</p>
</div>

<div class="span-5">
{% if form %}
  <form action="" method="post" id="signup">
  <h3>Sign up</h3>
  <table>
  {{ form.as_table }}
  <tr>
   <td></td>
   <td><input type="submit" value="sign up" /></td>
  </tr>
  <tr>
   <td></td>
   <td class="small"><a href='{% url email_reminder %}'>Lost your login information?</a></td>
  </tr>
  </table>
  </form>
  You can also <a href='/aboutus/'>read more about us</a>.
{% endif %}
    <p class="small">We will occasionally suggest tasks on behalf of other transparency related groups such as <a href="http://www.mysociety.org/">mySociety</a> and <a href="http://www.thestraightchoice.org/">The Straight Choice</a>, but we'll never share your private details with anyone, and we'll never send you more than two emails a week, no matter what.  Read our <a href="/aboutus/#privacy">terms and conditions</a> for more.</p>
</div>

{% endblock %}

{% block js %}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  data.addRows(1);
  data.setValue(0, 0, '% complete');
  data.setValue(0, 1, {{percent_complete}});

  // Create and draw the visualization.
  var chart = new google.visualization.Gauge(document.getElementById('visualization'));
  var opts = {redFrom: 90, 
              redTo: 100, 
              yellowFrom: 75,
              yellowTo: 90, 
              greenFrom: 35, 
              greenTo: 75};

   chart.draw(data, opts);
}
google.setOnLoadCallback(drawVisualization);
</script>
{% endblock %}
